<template>
	<view class="login-wrap">
		<image class="i-img"  src="../../static/img/a4.jpg"></image>
		<view class="login">
			<view class="i-wrap">
				<view class="i-icon">
					<vs-icon type="icon-weixin" size="100" ></vs-icon>
				</view>
				<button class="i-btn" open-type="getUserInfo" @click="fnLogin">微信授权登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad(option) {
			console.log(option)
		},
		methods: {
			fnLogin(){
				this.$fun.login().then(data=>{
					console.log(data)
				}).catch(err=>{
					console.log(err)
				})
			},
			fnset(){
				this.$store.state.userinfo={
					name:'张三',
					eage:'88'
				}
			}
			
		}
	}
</script>

<style lang="scss">
	.login-wrap{
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		.i-img{
			width: 100%;
			height: 100%;
		}
		.login{
			position: absolute;
			//margin: auto;
			top: 0; bottom: 0; left: 0; right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			//background: #007AFF;
			.i-wrap{
				width: 280px;
				height: 300px;
				padding: 20px;
				display: flex;
				border-radius: 4px;
				flex-direction: column;
				justify-content: flex-end;
				align-items: center;
				border: 1px solid #efefef;
				border-radius: 10px;
				background-color: rgba(0,0,0,0.2);
				//background: #fff;
				.i-btn{
					width: 80%;
					color: #fff;
					border: 1px solid #efefef;
					background-color: rgba(0,0,0,0.2);
					&:active{
						background-color:rgba(255,255,255,0.2);
						
					}
				}
				.i-icon{ 
					display: flex;
					align-items: center;
					flex: 1; 
					color: rgba(255,255,255,0.8);
					//background: #007AFF;
				}
			}
		}
	}

</style>
